<template>
    <div class="app-grade">
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <el-button type="primary" @click="showAdd">新增</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row class="searchBox">
            <el-col :span="24">
                <el-form ref="search" :inline="true" :model="search">
                    <div class="searchBar">
                        <el-form-item label="" class="search">
                            <el-input v-model="search.wd"></el-input>
                        </el-form-item>
                        <el-button icon="el-icon-search" @click="getData()"></el-button>
                    </div>
                    <el-form-item class="orderCol" label="" prop="type">
                        <el-radio-group v-model="search.col">
                            <el-radio label="id" name="col">默认</el-radio>
                            <el-radio label="chinese" name="col">语文</el-radio>
                            <el-radio label="math" name="col">数学</el-radio>
                            <el-radio label="english" name="col">英语</el-radio>
                            <el-radio label="total" name="col">总分</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item class="orderType" label="" prop="type">
                        <el-radio-group v-model="search.type">
                            <el-radio label="asc" name="type">升序</el-radio>
                            <el-radio label="desc" name="type">降序</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item class="pageSel" label="每页显示:" prop="type">
                        <el-select v-model="search.size" placeholder="请选择">
                            <el-option :label="5" :value="5"></el-option>
                            <el-option :label="10" :value="10"></el-option>
                            <el-option :label="15" :value="15"></el-option>
                            <el-option :label="20" :value="20"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="pageSel" label="每页显示:" prop="type">
                        <el-button type="primary">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row class="gradeList">
            <el-col :span="24">
                <template>
                    <el-table :data="tableData" border style="width: 100%;text-align:center">
                        <el-table-column fixed prop="id" label="编号"></el-table-column>
                        <el-table-column fixed prop="name" label="姓名"></el-table-column>
                        <el-table-column fixed prop="class" label="班级"></el-table-column>
                        <el-table-column fixed prop="chinese" label="语文"></el-table-column>
                        <el-table-column fixed prop="math" label="数学"></el-table-column>
                        <el-table-column fixed prop="english" label="英语"></el-table-column>
                        <el-table-column fixed prop="total" label="总分"></el-table-column>


                        <el-table-column label="操作">
                            <template v-slot="scope">
                                <el-button @click="editGradeHandler(scope.row)" type="text" size="small">编辑</el-button>
                                <el-button @click="delGradeHandler(scope.row)" type="text" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-col>
        </el-row>
        <el-row class="pageBox">
            <el-col :span="24" style="text-align:right;">
                <el-pagination background layout="total,prev, pager, next,jumper" :total="total"
                    :page-size="search.size" @current-change="currentChange">
                </el-pagination>
            </el-col>
        </el-row>


        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
            <span>是否删除当前成绩?</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmDeleteHandler">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog :title="isEdit ? '修改成绩' : '新增成绩'" :visible.sync="dialogFormVisible" @close="dialogCloseHandler">
            <!-- 新增 -->
            <template v-if="!isEdit">
                <el-form ref="formAdd" :model="form">
                    <el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="班级" prop="class" :label-width="formLabelWidth">
                        <el-select v-model="form.class" placeholder="请选择班级">
                            <!-- <el-option label="2213" value="2213"></el-option> -->
                            <!-- el-option[label=22$$][value=20$$]*23 -->
                            <el-option label="2201" value="2001"></el-option>
                            <el-option label="2202" value="2002"></el-option>
                            <el-option label="2203" value="2003"></el-option>
                            <el-option label="2204" value="2004"></el-option>
                            <el-option label="2205" value="2005"></el-option>
                            <el-option label="2206" value="2006"></el-option>
                            <el-option label="2207" value="2007"></el-option>
                            <el-option label="2208" value="2008"></el-option>
                            <el-option label="2209" value="2009"></el-option>
                            <el-option label="2210" value="2010"></el-option>
                            <el-option label="2211" value="2011"></el-option>
                            <el-option label="2212" value="2012"></el-option>
                            <el-option label="2213" value="2013"></el-option>
                            <el-option label="2214" value="2014"></el-option>
                            <el-option label="2215" value="2015"></el-option>
                            <el-option label="2216" value="2016"></el-option>
                            <el-option label="2217" value="2017"></el-option>
                            <el-option label="2218" value="2018"></el-option>
                            <el-option label="2219" value="2019"></el-option>
                            <el-option label="2220" value="2020"></el-option>
                            <el-option label="2221" value="2021"></el-option>
                            <el-option label="2222" value="2022"></el-option>
                            <el-option label="2223" value="2023"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="语文" prop="ch" :label-width="formLabelWidth">
                        <el-input v-model="form.ch" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="数学" prop="mh" :label-width="formLabelWidth">
                        <el-input v-model="form.mh" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="英语" prop="eh" :label-width="formLabelWidth">
                        <el-input v-model="form.eh" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item style="text-align:center">
                        <el-button type="primary" @click="addGradeHandler">确 定</el-button>
                        <el-button @click="cancelHandler">取 消</el-button>
                    </el-form-item>
                </el-form>
            </template>
            <!-- 编辑 -->
            <template v-else>
                <el-form ref="formEdit" :model="info">
                    <el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
                        <el-input v-model="info.name" disabled autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="班级" prop="class" :label-width="formLabelWidth">
                        <el-select v-model="info.class" disabled placeholder="请选择班级">
                            <!-- <el-option label="2213" value="2213"></el-option> -->
                            <!-- el-option[label=22$$][value=20$$]*23 -->
                            <el-option label="2201" value="2001"></el-option>
                            <el-option label="2202" value="2002"></el-option>
                            <el-option label="2203" value="2003"></el-option>
                            <el-option label="2204" value="2004"></el-option>
                            <el-option label="2205" value="2005"></el-option>
                            <el-option label="2206" value="2006"></el-option>
                            <el-option label="2207" value="2007"></el-option>
                            <el-option label="2208" value="2008"></el-option>
                            <el-option label="2209" value="2009"></el-option>
                            <el-option label="2210" value="2010"></el-option>
                            <el-option label="2211" value="2011"></el-option>
                            <el-option label="2212" value="2012"></el-option>
                            <el-option label="2213" value="2013"></el-option>
                            <el-option label="2214" value="2014"></el-option>
                            <el-option label="2215" value="2015"></el-option>
                            <el-option label="2216" value="2016"></el-option>
                            <el-option label="2217" value="2017"></el-option>
                            <el-option label="2218" value="2018"></el-option>
                            <el-option label="2219" value="2019"></el-option>
                            <el-option label="2220" value="2020"></el-option>
                            <el-option label="2221" value="2021"></el-option>
                            <el-option label="2222" value="2022"></el-option>
                            <el-option label="2223" value="2023"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="语文" prop="chinese" :label-width="formLabelWidth">
                        <el-input v-model="info.chinese" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="数学" prop="math" :label-width="formLabelWidth">
                        <el-input v-model="info.math" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="英语" prop="english" :label-width="formLabelWidth">
                        <el-input v-model="info.english" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item style="text-align:center">
                        <el-button type="primary" @click="saveGradeHandler">确 定</el-button>
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </el-dialog>


    </div>
</template>

<script>

import { searchGradeOrderLimit, addGrade, searchGradeById, updateGradeById,deleteGradeById } from "@/api/grade";

export default {
    name: "GradeView",
    data() {
        return {
            tableData: [],
            search: {
                wd: "",
                col: "id",
                type: "asc",
                page: 1,
                size: 5,
            },
            form: {
                name: '',
                class: '',
                ch: '',
                eh: '',
                mh: '',
            },
            info: {
                id: '',
                name: '',
                class: '',
                chinese: '',
                math: '',
                english: '',
            },
            dialogFormVisible: false,
            dialogVisible:false,
            isEdit: false,
            title: "新增成绩",
            formLabelWidth: '120px',
            total: 0,
            maxPage: null,
            current: 1,
            deleteId:null,
        }
    },
    methods: {
        getData() {
            searchGradeOrderLimit({ ...this.search }).then(res => {
                console.log("res", res);
                if (res.status == true) {
                    this.tableData = res.list;
                    this.total = res.total
                    this.maxPage = res.maxPage
                    this.current = res.current
                }
            })
        },
        showAdd() {
            this.isEdit = false;
            this.dialogFormVisible = true;
        },
        async editGradeHandler(row) {
            console.log(row);

            try {
                var res = await searchGradeById({
                    id: row.id,
                })
                var { status, message, data } = res;
                if (status) {
                    this.info = data;
                    this.isEdit = true;
                    this.dialogFormVisible = true;
                } else {
                    throw message;
                }

            } catch (err) {
                this.$message({
                    message: err.message,
                    type: "error",
                })
            }

        },
        delGradeHandler(row) {
            this.dialogVisible = true;
            console.log(row);
            this.deleteId = row.id;
        },
        currentChange(page) {
            console.log(11111, page);
            this.search.page = page;
        },
        async addGradeHandler() {

            if (this.form.name && this.form.class && this.form.ch && this.form.mh && this.form.eh) {

                try {
                    var res = await addGrade(this.form);
                    var { status, message } = res;

                    // this->组件实例(实例化对象  => ElementUI挂载到vue时,会给Vue添加 Vue.prototype.$message=xxx方法 => 所有的实例均可以访问)
                    // this.$message('这是一条消息提示');
                    if (status) {
                        this.$message({
                            message: '新增成功',
                            type: 'success'
                        });
                        this.dialogFormVisible = false;
                        this.$refs.formAdd.resetFields();
                    } else {
                        throw message;
                    }
                    console.log(res);


                } catch (err) {
                    console.log(err);

                    this.$message({
                        message: err.message,
                        type: 'error'
                    });
                }
            } else {
                this.$message({
                    message: "请填入完整信息",
                    type: 'warning'
                });
            }

        },
        async saveGradeHandler() {
            // info: {
            //     id:'',
            //     name: '',
            //     class: '',
            //     chinese: '',
            //     math: '',
            //     english: '',
            // },
            if (this.info.id && this.info.chinese && this.info.math && this.info.english) {
                try {
                    var res = await updateGradeById({
                        id: this.info.id,
                        ch: this.info.chinese,
                        mh: this.info.math,
                        eh: this.info.english,
                    })
                    var { status, message } = res;

                    // this->组件实例(实例化对象  => ElementUI挂载到vue时,会给Vue添加 Vue.prototype.$message=xxx方法 => 所有的实例均可以访问)
                    // this.$message('这是一条消息提示');
                    if (status) {
                        this.$message({
                            message: '更新成功',
                            type: 'success'
                        });
                        this.dialogFormVisible = false;
                        this.$refs.formEdit.resetFields();
                        this.getData();
                    } else {
                        throw message;
                    }
                    console.log(res);


                } catch (err) {
                    console.log(err);

                    this.$message({
                        message: err.message,
                        type: 'error'
                    });
                }
            } else {
                this.$message({
                    message: "请填入完整信息",
                    type: 'warning'
                });
            }

        },
        async confirmDeleteHandler(){
            if(this.deleteId){
                // this.dialogVisible = false
                try {
                    var res = await deleteGradeById({id:this.deleteId});
                    var { status, message } = res;

                    // this->组件实例(实例化对象  => ElementUI挂载到vue时,会给Vue添加 Vue.prototype.$message=xxx方法 => 所有的实例均可以访问)
                    // this.$message('这是一条消息提示');
                    if (status) {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.dialogVisible = false;
                        this.getData();
                    } else {
                        throw message;
                    }
                    console.log(res);


                } catch (err) {
                    console.log(err);

                    this.$message({
                        message: err.message,
                        type: 'error'
                    });
                } 
            }
        },
        cancelHandler() {
            console.log(111111, this.$refs["formAdd"]);
            this.$refs["formAdd"].resetFields();
            this.dialogFormVisible = false;
        },
        dialogCloseHandler() {
            console.log(this.$refs["formAdd"]);
            console.log(this.$refs["formEdit"]);

            // this.isEdit==false  => 默认点击新增
            if (this.isEdit == false) {
                this.$refs["formAdd"].resetFields();
            } else {
                this.$refs["formEdit"].resetFields();
            }
        }
    },
    watch: {
        // search:{
        //     deep:true,
        //     handler:function(newVal,oldVal){
        //         console.log(111111,newVal,oldVal);
        //         console.log(111111,newVal,oldVal);
        //         this.getData();
        //     }
        // }
        ["search.col"](newVal, oldVal) {
            console.log(111111, newVal, oldVal);
            this.getData();
        },
        ["search.type"](newVal, oldVal) {
            console.log(111111, newVal, oldVal);
            this.getData();
        },
        ["search.page"](newVal, oldVal) {
            console.log(111111, newVal, oldVal);
            this.getData();
        },
        ["search.size"](newVal, oldVal) {
            console.log(111111, newVal, oldVal);
            this.getData();
        },


    },
    mounted() {
        this.getData();
    }
}
</script>

<style lang="scss" scoped>
.searchBox,
.pageBox {
    margin-top: 10px;
}

.searchBar {
    display: inline-block;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
}

.searchBar .search {
    margin: 0;
}

::v-deep .searchBar .el-input input {
    border: 0;
}

.orderCol {
    padding: 0 20px;
    margin-left: 20px;
    border: 1px solid #DCDFE6;
}

::v-deep .orderCol .el-radio {
    margin-right: 10px;
}

.orderType {
    padding: 0 20px;
    margin-left: 20px;
    border: 1px solid #DCDFE6;
}

::v-deep .orderType .el-radio {
    margin-right: 10px;
}

.searchBar button {
    border: 0;
}

.gradeList {
    margin-top: 10px;
}

// ::v-deep 选择器 深度选择器 -> 专门用于修改组件内的样式
// /deep/ 选择器 深度选择器 -> 专门用于修改组件内的样式
::v-deep .gradeList .el-table .el-table__cell {
    text-align: center;
}
</style>